<div class="todos">
    <div class="right-content">
        <div class="todo-item">
            <div class="item-title">
                <span>月报情况</span>
            </div>
            <div class="item-content">
                <el-row>
                    <el-col :span="12" style="text-align:center">
                        <div class="item-right-img">
                            <img src="../../assets/img/yingbaobumen.png">
                            <div class="f-s-16" style="color:#4687F7">12</div>
                            <div>应报部门</div>
                        </div>
                    </el-col>
                    <el-col :span="12" style="text-align:center">
                        <div class="item-right-img">
                            <img src="../../assets/img/yibaobumen.png">
                            <div class="f-s-16" style="color:#61D186">12</div>
                            <div>已报部门</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="todo-item">
            <div class="item-title">
                <span>我发起的任务</span>
                <img class="right-icon" src="../../assets/img/tubiao.png" v-if="myPublishTaskData.showTable" @click="myPublishTaskData.showTable =!myPublishTaskData.showTable;switchTable()">
                <img class="right-icon" src="../../assets/img/biaoge.png" v-if="!myPublishTaskData.showTable" @click="myPublishTaskData.showTable =!myPublishTaskData.showTable;switchTable()">
            </div>
            <div class="item-content">
                <el-table v-show="myPublishTaskData.showTable" :data="myPublishTaskData.items" header-row-class-name="headerRowClass"
                    max-height="312" style="width:100%;padding-left: 20px;box-sizing:
                    border-box">
                    <el-table-column label="类别" prop="typeName" min-width="30%">
                    </el-table-column>
                    <el-table-column label="状态" min-width="50%">
                        <template slot-scope="scope">
                            <div class="show-data-div">
                                <img :src="scope.row.status | getImgByStatus" width="16" style="vertical-align: middle;"
                                    :class="{'yiwancheng': scope.row.status == 3}">
                                <span>{{scope.row.status | getNameByStatus}}</span>
                            </div>
                            <div class="operate-div">
                                <div class="cell-btn">
                                    <img src="../../assets/img/jieshou.png" width="16" style="vertical-align: middle;">
                                    <span>接收</span>
                                </div>
                                <div class="cell-btn">
                                    <img src="../../assets/img/chakanxiangqing.png" width="16" style="vertical-align: middle;">
                                    <span>详情</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="数值" prop="num" min-width="20%">
                        <template slot-scope="scope">
                            <div class="show-data-div">{{scope.row.num}}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div ref="echartDiv2" v-show="!myPublishTaskData.showTable" style="width: 100%; height: 312px"></div>
            </div>
        </div>
        <div class="todo-item">
            <div class="item-title">
                <span>12345热线</span>
                <img class="right-icon" src="../../assets/img/tubiao.png" v-if="hotLineData.showTable" @click="hotLineData.showTable =!hotLineData.showTable;switchTable()">
                <img class="right-icon" src="../../assets/img/biaoge.png" v-if="!hotLineData.showTable" @click="hotLineData.showTable =!hotLineData.showTable;switchTable()">
            </div>
            <div class="item-content">
                <el-table v-show="hotLineData.showTable" :data="hotLineData.items" header-row-class-name="headerRowClass"
                    max-height="256" style="width: calc(100% - 20px
                    );box-sizing:border-box;padding-left: 20px;">
                    <el-table-column label="当年月份" prop="filed1" min-width="25%">
                    </el-table-column>
                    <el-table-column label="回访满意度(%)" prop="filed2" min-width="25%">
                    </el-table-column>
                    <el-table-column label="按时办结率(%)" prop="filed3" min-width="25%">
                    </el-table-column>
                    <el-table-column label="综合得分" prop="filed4" min-width="25%">
                    </el-table-column>
                </el-table>
                <div ref="echartDiv3" v-show="!hotLineData.showTable" style="width: 100%; height: 260px"></div>
            </div>
        </div>
    </div>
    <div class="main-content">
        <div class="todo-item">
            <div class="menu-item" v-for="(item,index) in menuItems" :key="index">
                <el-badge :value="item.badgeNum">
                    <img :src="item.img">
                </el-badge>
                <div style="line-height:18px">{{item.name}}</div>
            </div>
        </div>
        <div class="todo-item">
            <div class="item-title">
                <span>{{currrentDate || '--'}}</span>
                <img class="right-icon" src="../../assets/img/dituqiehuan.png">
            </div>
            <div class="item-content">
                <el-tabs>
                    <el-tab-pane v-for="(item,index) in tabItems" :key="index" :label="item"></el-tab-pane>
                </el-tabs>
                <el-table v-show="todoData.showTable" :data="todoData.items" max-height="260" row-class-name="rowClass"
                    header-row-class-name="headerRowClass" style="width: 100%;padding-left: 30px;box-sizing:
                    border-box">
                    <el-table-column label="任务名称" prop="name" min-width="25%"></el-table-column>
                    <el-table-column label="类别" prop="typeName" min-width="25%">
                        <template slot-scope="scope">
                            <div class="show-data-div">{{scope.row.typeName}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="截止时间" prop="date" min-width="25%">
                        <template slot-scope="scope">
                            <div class="show-data-div">{{scope.row.date}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" min-width="25%">
                        <template slot-scope="scope">
                            <div class="show-data-div">
                                <img :src="scope.row.status | getImgByStatus" width="16" style="vertical-align: middle;"
                                    :class="{'yiwancheng': scope.row.status == 3}">
                                <span>{{scope.row.status | getNameByStatus}}</span>
                            </div>
                            <div class="operate-div">
                                <div class="cell-btn">
                                    <img src="../../assets/img/jieshou.png" width="16" style="vertical-align: middle;">
                                    <span>接收</span>
                                </div>
                                <div class="cell-btn">
                                    <img src="../../assets/img/chakanxiangqing.png" width="16" style="vertical-align: middle;">
                                    <span>详情</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="todo-item">
            <div class="item-title">
                <span>本月市级指标完成进度</span>
                <img class="right-icon" src="../../assets/img/tubiao.png" v-if="currentMonthData.showTable" @click="currentMonthData.showTable =!currentMonthData.showTable;switchTable()">
                <img class="right-icon" src="../../assets/img/biaoge.png" v-if="!currentMonthData.showTable" @click="currentMonthData.showTable =!currentMonthData.showTable;switchTable()">
            </div>
            <div class="item-content">
                <el-tabs @tab-click="tabHandleClick" v-show="currentMonthData.showTable">
                    <el-tab-pane v-for="(item,index) in tabItems2" :key="index" :label="item"></el-tab-pane>
                </el-tabs>
                <el-table v-show="currentMonthData.showTable" :data="currentMonthData.items" max-height="208"
                    row-class-name="rowClass" header-row-class-name="headerRowClass" style="width: 100%;padding-left: 30px;box-sizing:
                    border-box">
                    <el-table-column label="指标项" prop="filed1" min-width="20%">
                    </el-table-column>
                    <el-table-column label="单位" prop="filed2" min-width="20%">
                        <template slot-scope="scope">
                            <div class="show-data-div">{{scope.row.filed2}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="分值" prop="filed3" min-width="20%">
                        <template slot-scope="scope">
                            <div class="show-data-div">{{scope.row.filed3}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="完成进度(%)" prop="filed4" min-width="20%">
                        <template slot-scope="scope">
                            <div class="show-data-div">{{scope.row.filed4}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" min-width="20%">
                        <template slot-scope="scope">
                            <div class="show-data-div">
                                <img :src="scope.row.status | getImgByStatus" width="16" style="vertical-align: middle;"
                                    :class="{'yiwancheng': scope.row.status == 3}">
                                <span>{{scope.row.status | getNameByStatus}}</span>
                            </div>
                            <div class="operate-div">
                                <div class="cell-btn">
                                    <img src="../../assets/img/chakanxiangqing.png" width="16" style="vertical-align: middle;">
                                    <span>详情</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div ref="echartDiv1" v-show="!currentMonthData.showTable" style="width: 100%; height: 260px"></div>
            </div>
        </div>
    </div>
</div>
</div>